<template>
  <div class="dashboard-container">
    <!-- 欢迎信息和日期 -->
    <div class="welcome-section">
      <div class="welcome-info">
        <h2 >您好，管理员</h2>
        <p>欢迎回到 Star-Vue 管理系统，祝您工作愉快！</p>
      </div>
      <div class="date-info">
        <t-icon name="calendar" class="date-icon" />
        {{ currentDate }}
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-cards">
      <t-card
        v-for="(card, index) in statsCards"
        :key="index"
        :hover="true"
        :bordered="true"
        class="stats-card"
      >
        <div class="stats-card-inner">
          <div class="stats-card-icon" :class="`bg-${card.color}`">
            <t-icon :name="card.icon" />
          </div>
          <div class="stats-card-content">
            <div class="stats-title">{{ card.title }}</div>
            <div class="stats-value">{{ card.value }}</div>
            <div class="stats-trend" :class="card.trend > 0 ? 'up' : 'down'">
              <t-icon :name="card.trend > 0 ? 'arrow-up' : 'arrow-down'" />
              {{ Math.abs(card.trend) }}% 相比上周
            </div>
          </div>
        </div>
      </t-card>
    </div>

    <!-- 图表和活动信息 -->
    <div class="dashboard-main">
      <!-- 左侧：统计图表 -->
      <t-card title="本周数据统计" class="chart-card">
        <div class="chart-placeholder">
          <div class="chart-info">
            <div class="chart-label">总访问量</div>
            <div class="chart-value">7,689</div>
            <div class="chart-trend up">+16.2% 相比上周</div>
            <t-button theme="primary" variant="outline" size="small" class="view-details-btn">
              <template #icon><t-icon name="chart" /></template>
              查看详情
            </t-button>
          </div>
          <div class="chart-display">
            <div class="bar-chart">
              <!-- 模拟的简单柱状图 -->
              <div v-for="(h, i) in chartData" :key="i" class="bar-wrapper">
                <div class="bar" :style="{ height: `${h}px` }"></div>
                <div class="bar-hover-value">{{ h * 100 }}</div>
              </div>
            </div>
            <div class="chart-days">
              <span v-for="(day, i) in weekDays" :key="i">{{ day }}</span>
            </div>
          </div>
        </div>
      </t-card>

      <!-- 右侧：最近活动 -->
      <t-card title="最近活动" subtitle="系统最新动态" class="activities-card">
        <t-list>
          <t-list-item v-for="(activity, index) in recentActivities" :key="index" class="activity-item">
            <div class="activity-avatar">
              <t-avatar :src="activity.avatar" />
            </div>
            <div class="activity-info">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-time">
                <t-icon name="time" size="small" />
                {{ activity.time }}
              </div>
            </div>
          </t-list-item>
        </t-list>
        <template #footer>
          <div class="view-more">
            <t-button theme="primary" variant="text">
              查看更多
              <template #suffix><t-icon name="chevron-right" /></template>
            </t-button>
          </div>
        </template>
      </t-card>
    </div>

    <!-- 快捷操作 -->
    <t-card title="快捷操作" subtitle="常用功能访问入口" class="shortcuts-card">
      <div class="shortcuts-container">
        <t-button v-for="(shortcut, index) in shortcuts" :key="index" variant="outline" class="shortcut-btn">
          <template #icon><t-icon :name="shortcut.icon" /></template>
          {{ shortcut.name }}
        </t-button>
      </div>
    </t-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
// api
import api from '@/request/api/api';


const router = useRouter();





// 当前日期
const currentDate = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
  return `${year}年${month}月${day}日 ${week}`;
});

// 统计卡片数据
const statsCards = ref([
  {
    title: '用户总数',
    value: '1,286',
    icon: 'user',
    trend: 12.5,
    color: 'blue'
  },
  {
    title: '本周访问',
    value: '7,689',
    icon: 'browse',
    trend: 16.2,
    color: 'green'
  },
  {
    title: '新增订单',
    value: '368',
    icon: 'shop',
    trend: -2.8,
    color: 'orange'
  },
  {
    title: '系统消息',
    value: '12',
    icon: 'notification',
    trend: 5.6,
    color: 'purple'
  }
]);

// 模拟图表数据
const chartData = ref([30, 45, 25, 60, 70, 40, 50]);
const weekDays = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);

// 最近活动数据
const recentActivities = ref([
  {
    avatar: 'https://tdesign.gtimg.com/starter/avatar1.jpg',
    title: '管理员新增了用户 "张三"',
    time: '10分钟前'
  },
  {
    avatar: 'https://tdesign.gtimg.com/starter/avatar2.jpg',
    title: '系统更新已完成',
    time: '1小时前'
  },
  {
    avatar: 'https://tdesign.gtimg.com/starter/avatar3.jpg',
    title: '李四提交了新的工单',
    time: '2小时前'
  },
  {
    avatar: 'https://tdesign.gtimg.com/starter/avatar4.jpg',
    title: '王五修改了系统设置',
    time: '昨天'
  }
]);

// 快捷操作
const shortcuts = ref([
  { name: '添加用户', icon: 'user-add' },
  { name: '系统设置', icon: 'setting' },
  { name: '数据备份', icon: 'cloud-upload' },
  { name: '查看日志', icon: 'file-copy' },
  { name: '消息中心', icon: 'mail' }
]);
</script>

<style scoped>
.dashboard-container {
  padding: 0 0 24px 0;
}

.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--td-component-stroke);
}

.welcome-info h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  background-image: linear-gradient(45deg, var(--td-brand-color), var(--td-brand-color-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.welcome-info p {
  margin: 8px 0 0;
  color: var(--td-text-color-secondary);
  font-size: 15px;
}

.date-info {
  color: var(--td-text-color-secondary);
  font-size: 14px;
  background-color: var(--td-bg-color-container);
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
}

.date-icon {
  margin-right: 8px;
  color: var(--td-brand-color);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stats-card {
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border: none !important;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.stats-card-inner {
  display: flex;
  align-items: center;
  padding: 16px;
}

.stats-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bg-blue {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.bg-green {
  background: linear-gradient(135deg, #52c41a, #73d13d);
}

.bg-orange {
  background: linear-gradient(135deg, #fa8c16, #ffa940);
}

.bg-purple {
  background: linear-gradient(135deg, #722ed1, #9254de);
}

.stats-card-content {
  flex: 1;
}

.stats-title {
  font-size: 15px;
  color: var(--td-text-color-secondary);
  margin-bottom: 8px;
}

.stats-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 8px;
}

.stats-trend {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.stats-trend.up {
  color: var(--td-success-color);
}

.stats-trend.down {
  color: var(--td-error-color);
}

.dashboard-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card, .activities-card, .shortcuts-card {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  border: none !important;
}

.chart-card:hover, .activities-card:hover, .shortcuts-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.chart-placeholder {
  height: 320px;
  display: flex;
  padding: 20px 0;
}

.chart-info {
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
}

.chart-label {
  font-size: 14px;
  color: var(--td-text-color-secondary);
}

.chart-value {
  font-size: 32px;
  font-weight: 600;
  margin: 12px 0;
}

.chart-trend {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
}

.chart-trend.up {
  color: var(--td-success-color);
}

.view-details-btn {
  margin-top: auto;
  align-self: flex-start;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-display {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bar-chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 20px;
}

.bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bar-hover-value {
  position: absolute;
  top: -28px;
  font-size: 12px;
  background-color: var(--td-brand-color);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bar-hover-value::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--td-brand-color);
}

.bar-wrapper:hover .bar-hover-value {
  opacity: 1;
  transform: translateY(0);
}

.bar {
  width: 24px;
  background: linear-gradient(180deg, var(--td-brand-color), var(--td-brand-color-hover));
  border-radius: 4px;
  transition: height 0.5s, width 0.3s;
}

.bar-wrapper:hover .bar {
  width: 28px;
}

.chart-days {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
  padding: 0 20px;
}

.chart-days span {
  font-size: 13px;
  color: var(--td-text-color-secondary);
}

.activities-card {
  height: 100%;
}

.activity-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--td-component-stroke);
  transition: all 0.2s;
  border-left: 2px solid transparent;
}

.activity-item:hover {
  background-color: var(--td-bg-color-container-hover);
  border-left: 2px solid var(--td-brand-color);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item {
  display: flex;
  align-items: center;
}

.activity-avatar {
  margin-right: 12px;
}

.activity-info {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: var(--td-text-color-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-more {
  text-align: center;
  padding-top: 8px;
}

.shortcuts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px;
}

.shortcut-btn {
  transition: all 0.3s;
  border-radius: 10px;
  padding: 8px 16px;
  background-color: rgba(var(--td-brand-color-rgb), 0.05);
  border-color: rgba(var(--td-brand-color-rgb), 0.2);
}

.shortcut-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  background-color: rgba(var(--td-brand-color-rgb), 0.1);
  border-color: var(--td-brand-color);
}

@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-main {
    grid-template-columns: 1fr;
  }
  
  .chart-placeholder {
    height: 260px;
  }
}

@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .date-info {
    align-self: flex-start;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .chart-placeholder {
    flex-direction: column;
    height: auto;
    padding: 20px;
  }
  
  .chart-info {
    width: 100%;
    padding: 0;
    margin-bottom: 24px;
  }
  
  .bar {
    width: 18px;
  }
  
  .bar-wrapper:hover .bar {
    width: 22px;
  }
}
</style>